<include file="Public:system_header" title="草稿纸"/>
	<div class="module_public_main">
<canvas id="canvas" width="900" height="450" style="border:1px solid #CCC;"></canvas>
<div style="float:right;">
<button style="width:80px;background-color:yellow;" onclick='linecolor = "yellow";'>黄色</button><br/>
<button style="width:80px;background-color:red;" onclick='linecolor = "red";'>红色</button><br/>
<button style="width:80px;background-color:blue;color:#ffffff;" onclick='linecolor = "blue";'>蓝色</button><br/>
<button style="width:80px;background-color:green;color:#ffffff;" onclick='linecolor = "green";'>绿色</button><br/>
<button style="width:80px;background-color:white;" onclick='linecolor = "white";'>白色</button><br/>
<button style="width:80px;background-color:black;color:white;" onclick='linecolor = "black";'>黑色</button><br/>
<button style="width:80px;background-color:purple;color:white;" onclick='linecolor = "purple";'>紫色</button><br/>
<button style="width:80px;background-color:white;" onClick="linw = 4;">4px</button><br/>
<button style="width:80px;background-color:white;" onClick="linw = 8;">8px</button><br/>
</div>



<script type="text/javascript">

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//画一个黑色矩形
ctx.fillStyle="black";

ctx.fillRect(0,0,900,450);

//按下标记
var onoff = false;
var oldx = -10;
var oldy = -10;
//设置颜色
var linecolor = "white";
//设置线宽
var linw = 4;
//添加鼠标移动事件
canvas.addEventListener("mousemove",draw,true);
//添加鼠标按下事件
canvas.addEventListener("mousedown",down,false);
//添加鼠标弹起事件
canvas.addEventListener("mouseup",up,false);
function down(event){
	onoff = true;
	oldx = event.pageX-10;
	oldy = event.pageY-10;
}
function up(){
	onoff = false;
}
function draw(event){
	if(onoff == true){ 
		var newx = event.pageX-10; 
		var newy = event.pageY-10; 

		ctx.beginPath();
		ctx.moveTo(oldx,oldy);
		ctx.lineTo(newx,newy);
		ctx.strokeStyle=linecolor;
		ctx.lineWidth=linw;
		ctx.lineCap="round";
		ctx.stroke();

		oldx = newx;
		oldy = newy;
	};
};

</script>
	</div>
<include file="Public:system_footer" />